<template>
  <div>
    <div class="banner">
      <img
        src="@/assets/img/client/cloudGovernment/image54.png"
        style="width: 100%; height: 472px; z-index: -1"
      />
    </div>
    <div class="min-container">
      <section class="popular">
        <div class="popular-left">
          <img src="@/assets/img/client/cloudGovernment/image94.png" />
        </div>
        <div class="popular-right">
          <popularCon />
        </div>
      </section>
      <h2 class="severTitle">性能强大、安全、稳定的云产品与服务</h2>
      <productsAndServices />
    </div>
    <contactUs />
  </div>
</template>
<script setup lang="ts">
import popularCon from './productContent.vue'
import productsAndServices from './productsAndServices.vue'
import contactUs from '@/views/unit/contactUs.vue'
</script>
<style lang="less" scoped>
.popular {
  width: 100%;
  height: 355px;
  background: url(@/assets/img/client/cloudGovernment/Rectangle1470.png) no-repeat center center /
    100% 120%;
  margin-top: -120px;
  display: flex;
  padding: 1px 0 1px 15px;
  .popular-left {
    flex: 1;
  }
  .popular-right {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex: 2;
    .popular-right_con {
      display: flex;
      flex-wrap: wrap;
      .popular-con {
        width: 370px;
        height: 104px;
        margin-bottom: 30px;
        margin-right: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        position: relative;
        .con {
          margin-top: 10px;
          color: #909090;
          display: flex;
          flex-wrap: wrap;
          span {
            margin-right: 20px;
            margin-bottom: 5px;
          }
        }
        .price {
          display: flex;
          letter-spacing: 0.1em;
          align-items: baseline;
          font-size: 20px;
          font-weight: 500;
          color: #ff3939;
          .decorate {
            font-size: 12px;
            font-weight: 400;
          }
        }
      }
      .popularTags {
        display: inline-block;
        width: 32px;
        height: 14px;
        top: 5px;
        left: 150px;
        position: absolute;
        background: url(@/assets/img/client/cloudGovernment/Group2305.png) no-repeat center center /
          100% 100%;
      }
    }
  }
}
.severTitle {
  width: 100%;
  top: 919px;
  left: 624px;
  font-size: 3rem;
  text-align: center;
}
</style>
